<div class="handler">
  <div class="b-group">
    <div (click)="goToday()">Today</div>
  </div>
  <div class="b-group">
    <div class="icon-add" (click)="reduceUnit()"></div>
    <div class="icon-minus" (click)="increaseUnit()"></div>
  </div>
</div>
<section>
  <d-data-table
    #datatable
    [borderType]="'borderless'"
    [cssClass]="'devui-talbe-scorll-middle'"
    [fixHeader]="true"
    [dataSource]="basicDataSource"
    [scrollable]="true"
    [tableWidthConfig]="tableWidthConfig"
    minHeight="600px"
    (tableScrollEvent)="onTableScroll($event)"
  >
    <thead dTableHead>
      <tr dTableRow>
        <th dHeadCell [fixedLeft]="'0'">title</th>
        <th dHeadCell [fixedLeft]="'200px'">name</th>
        <th
          dHeadCell
          [fixedLeft]="'300px'"
          dResizeHandle
          [containerElement]="resizeHandleContainerElement"
          (resizeStartEvent)="onResizeStart($event)"
          (resizingEvent)="onResizing($event)"
          (resizeEndEvent)="onResized($event)"
        >
          status
        </th>
        <th dHeadCell>
          <d-gantt-scale
            [milestoneList]="milestoneList"
            [ganttScaleContainerOffsetLeft]="ganttScaleContainerOffsetLeft"
            [ganttBarContainerElement]="ganttBarContainerElement"
          ></d-gantt-scale>
        </th>
      </tr>
    </thead>
    <tbody dTableBody [minHeightStretchRow]="minHeightStretchRow">
      <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedLayer="nestedLayer" let-nestedIndex="nestedIndex">
        <tr dTableRow [style.height]="'40px'">
          <td dTableCell [fixedLeft]="'0'" [nestedColumn]="true" [rowItem]="rowItem" [nestedLayer]="nestedLayer">
            <span *ngIf="rowItem.ganttType === 'progress' || rowItem.ganttType === 'parentProgress'">{{ rowItem.title }}</span>
            <span *ngIf="rowItem.ganttType === 'milestone'" class="devui-gantt-milestone">
              <span class="icon">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="22px"
                  height="24px"
                  viewBox="0 0 22 24"
                  version="1.1"
                >
                  <defs>
                    <linearGradient x1="50%" y1="6.72700158%" x2="50%" y2="91.2568893%" id="gantt-linearGradient-1">
                      <stop stop-color="#3DCCA6" offset="0%" />
                      <stop stop-color="#2AA7AF" offset="100%" />
                    </linearGradient>
                    <path
                      d="M14,1.15470054 L20.3923048,4.84529946 C21.6299092,5.55983064 22.3923048,6.88033872 22.3923048,8.30940108 L22.3923048,15.6905989 C22.3923048,17.1196613 21.6299092,18.4401694 20.3923048,19.1547005 L14,22.8452995 C12.7623957,23.5598306 11.2376043,23.5598306 10,22.8452995 L3.60769515,19.1547005 C2.37009085,18.4401694 1.60769515,17.1196613 1.60769515,15.6905989 L1.60769515,8.30940108 C1.60769515,6.88033872 2.37009085,5.55983064 3.60769515,4.84529946 L10,1.15470054 C11.2376043,0.440169359 12.7623957,0.440169359 14,1.15470054 Z"
                      id="gantt-path-2"
                    />
                    <linearGradient x1="50%" y1="0%" x2="50%" y2="50%" id="gantt-linearGradient-4">
                      <stop stop-color="#FFFFFF" offset="0%" />
                      <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
                    </linearGradient>
                    <linearGradient x1="50%" y1="0%" x2="51.6276154%" y2="68.3310347%" id="gantt-linearGradient-5">
                      <stop stop-color="#FFFFFF" offset="0%" />
                      <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
                    </linearGradient>
                    <linearGradient x1="50%" y1="0%" x2="50%" y2="70.5804357%" id="gantt-linearGradient-6">
                      <stop stop-color="#FFFFFF" offset="0%" />
                      <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
                    </linearGradient>
                    <linearGradient x1="50%" y1="0%" x2="50%" y2="71.0876747%" id="gantt-linearGradient-7">
                      <stop stop-color="#FFFFFF" offset="0%" />
                      <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
                    </linearGradient>
                    <linearGradient x1="50%" y1="0%" x2="50%" y2="60.3844779%" id="gantt-linearGradient-8">
                      <stop stop-color="#FFFFFF" offset="0%" />
                      <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
                    </linearGradient>
                    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="gantt-linearGradient-9">
                      <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%" />
                      <stop stop-color="#FFFFFF" offset="100%" />
                    </linearGradient>
                    <filter x="-25.0%" y="-75.0%" width="150.0%" height="250.0%" filterUnits="objectBoundingBox" id="gantt-filter-10">
                      <feGaussianBlur stdDeviation="1" in="SourceGraphic" />
                    </filter>
                    <linearGradient x1="-33.9878453%" y1="3.1788779%" x2="67.7654261%" y2="81.2841156%" id="gantt-linearGradient-11">
                      <stop stop-color="#FF790E" offset="0%" />
                      <stop stop-color="#FECC55" offset="100%" />
                    </linearGradient>
                    <linearGradient x1="71.1217155%" y1="42.8128234%" x2="17.9433277%" y2="-14.3609467%" id="gantt-linearGradient-12">
                      <stop stop-color="#FFE88E" offset="0%" />
                      <stop stop-color="#FF790E" offset="100%" />
                    </linearGradient>
                  </defs>
                  <g id="gantt-page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="gantt-04fix" transform="translate(-189.000000, -423.000000)">
                      <g id="gantt-Group-2" transform="translate(40.000000, 417.000000)">
                        <g id="gant-group-4" transform="translate(148.000000, 6.000000)">
                          <mask id="gantt-mask-3" fill="white">
                            <use xlink:href="#gantt-path-2" />
                          </mask>
                          <use id="gantt-men" fill="url(#gantt-linearGradient-1)" xlink:href="#gantt-path-2" />
                          <polygon
                            fill="url(#gantt-linearGradient-4)"
                            opacity="0.200000003"
                            mask="url(#gantt-mask-3)"
                            points="10 0 14 0 13 13 11 13"
                          />
                          <polygon
                            fill="url(#gantt-linearGradient-5)"
                            opacity="0.200000003"
                            mask="url(#gantt-mask-3)"
                            transform="translate(17.500000, 11.000000) rotate(-270.000000) translate(-17.500000, -11.000000) "
                            points="14.5 4.5 18.5 4.5 20.5 17.5 19.5 17.5"
                          />
                          <polygon
                            fill="url(#gantt-linearGradient-6)"
                            opacity="0.200000003"
                            mask="url(#gantt-mask-3)"
                            transform="translate(7.000000, 11.000000) scale(-1, 1) rotate(-270.000000) translate(-7.000000, -11.000000) "
                            points="4 4.5 8 4.5 10 17.5 9 17.5"
                          />
                          <polygon
                            fill="url(#gantt-linearGradient-7)"
                            opacity="0.200000003"
                            mask="url(#gantt-mask-3)"
                            transform="translate(8.110913, 8.110913) rotate(-45.000000) translate(-8.110913, -8.110913) "
                            points="6.1109127 1.6109127 10.1109127 1.6109127 9.1109127 14.6109127 7.1109127 14.6109127"
                          />
                          <polygon
                            fill="url(#gantt-linearGradient-8)"
                            opacity="0.200000003"
                            mask="url(#gantt-mask-3)"
                            transform="translate(15.889087, 8.110913) rotate(-315.000000) translate(-15.889087, -8.110913) "
                            points="13.8890873 1.6109127 17.8890873 1.6109127 16.8890873 14.6109127 14.8890873 14.6109127"
                          />
                          <ellipse
                            fill="url(#gantt-linearGradient-9)"
                            opacity="0.5"
                            filter="url(#filter-10)"
                            mask="url(#gantt-mask-3)"
                            cx="12"
                            cy="17"
                            rx="6"
                            ry="2"
                          />
                          <polygon fill="url(#gantt-linearGradient-11)" mask="url(#gantt-mask-3)" points="12 8 18 9 15 11 18 13 11 14" />
                          <polygon fill="url(#gantt-linearGradient-12)" mask="url(#gantt-mask-3)" points="10 6 14 7 13 13 9 13" />
                          <polygon fill="#FFE3A0" mask="url(#gantt-mask-3)" points="10 6 11 6 9 17 8 17" />
                          <polygon fill="#B4832C" mask="url(#gantt-mask-3)" points="13 13 11 14 11.1707479 13" />
                          <rect fill="#000000" opacity="0.100000001" mask="url(#gantt-mask-3)" x="7" y="17" width="10" height="1" />
                        </g>
                      </g>
                    </g>
                  </g>
                </svg>
              </span>
              <span>Milestone</span>
            </span>
          </td>
          <td dTableCell [fixedLeft]="'200px'">{{ rowItem.lastName }}</td>
          <td
            dTableCell
            [fixedLeft]="'300px'"
            dResizeHandle
            [containerElement]="resizeHandleContainerElement"
            (resizeStartEvent)="onResizeStart($event)"
            (resizingEvent)="onResizing($event)"
            (resizeEndEvent)="onResized($event)"
          >
            <div class="reset-position-container">
              <d-reset-position
                class="reset-position"
                [ganttScaleContainerOffsetLeft]="ganttScaleContainerOffsetLeft"
                [datatableElementRef]="datatable"
                [startDate]="rowItem?.startDate"
                [endDate]="rowItem?.endDate"
                [containerScrollLeft]="tableScrollLeft"
              >
              </d-reset-position>
              {{ rowItem.status }}
            </div>
          </td>
          <td dTableCell>
            <d-gantt-bar
              *ngIf="rowItem?.ganttType === 'progress'"
              [startDate]="rowItem?.startDate"
              [endDate]="rowItem?.endDate"
              [tipTemplateRef]="tipTemplate"
              [id]="rowItem?.id"
              [data]="rowItem"
              [barMoveDisabled]="rowItem?.barMoveDisabled"
              [barResizeDisabled]="rowItem?.barResizeDisabled"
              [progressDisabled]="rowItem?.progressDisabled"
              [progressRate]="rowItem?.progressRate"
              (barMoveStartEvent)="onGanttBarMoveStart($event)"
              (barMovingEvent)="onGanttBarMoving($event)"
              (barResizeStartEvent)="onGanttBarResizeStart($event)"
              (barResizingEvent)="onGanttBarResizing($event)"
              (barMoveEndEvent)="onGanttBarMove($event)"
              (barResizeEndEvent)="onGanttBarResize($event)"
              (barProgressEvent)="onBarProgressEvent($event)"
            ></d-gantt-bar>
            <d-gantt-bar-parent
              *ngIf="rowItem?.ganttType === 'parentProgress'"
              [id]="rowItem?.id"
              [startDate]="rowItem?.startDate"
              [endDate]="rowItem?.endDate"
              [data]="rowItem"
              [progressRate]="rowItem?.progressRate"
            >
            </d-gantt-bar-parent>
            <d-gantt-milestone *ngIf="rowItem?.ganttType === 'milestone'" [startDate]="rowItem?.startDate" [title]="rowItem?.title">
            </d-gantt-milestone>
          </td>
        </tr>
      </ng-template>
    </tbody>
  </d-data-table>
</section>

<ng-template #tipTemplate let-ganttInstance="ganttInstance" let-data="data">
  <div class="title">{{ data?.title }}</div>
  <div class="content">
    <div>Duration: {{ ganttInstance?.duration }}</div>
    <div>ProgressRate: {{ (ganttInstance?.progressRate || 0) + '%' }}</div>
    <div>startDate: {{ ganttInstance?.startDate | i18nDate: 'short' }}</div>
    <div>endDate: {{ ganttInstance?.endDate | i18nDate: 'short' }}</div>
  </div>
</ng-template>

<ng-template #minHeightStretchRow>
  <tr class="min-height-stretch-row">
    <td dTableCell [fixedLeft]="'0'"></td>
    <td dTableCell [fixedLeft]="'200px'"></td>
    <td
      dTableCell
      [fixedLeft]="'300px'"
      dResizeHandle
      [containerElement]="resizeHandleContainerElement"
      (resizeStartEvent)="onResizeStart($event)"
      (resizingEvent)="onResizing($event)"
      (resizeEndEvent)="onResized($event)"
    ></td>
    <td dTableCell></td>
  </tr>
</ng-template>
